<!-- subset layout -->
<div id="subset_page">
   <p class="subset_page_header" action="showHeaderMenu(event)">Subgroups</p>
   <ul id="subgroups" class="subset_page_content"></ul>

   <p class="subset_page_header" action="showHeaderMenu(event)">User-defined subsets</p>
   <p id="subsets_placeholder" class="placeholder" action="showHeaderMenu(event)">
      <i>(None)</i></p>
   <ul id="subsets" class="subset_page_content"></ul>

   <p class="subset_page_header" action="showHeaderMenu(event)">Partitions</p>
   <p id="partitions_placeholder" class="placeholder" action="showHeaderMenu(event)">
      <i>(None)</i></p>
   <ul id="partitions" class="subset_page_content"></ul>
</div>

<!-- Templates -->
<div id="subgroup_templates">
   <template id="first-subgroup-template">
      <li id="${this.id}" action="showMenu(event, ${this.id})">
         ${this.name} = ⟨ ${generators[0]} ⟩
         is the trivial subgroup { ${generators[0]} }.
      </li>
   </template>
   <template id="subgroup-template">
      <li id="${this.id}" action="showMenu(event, ${this.id})">
         ${this.name} = ⟨ ${generators.join(', ')} ⟩
         is a subgroup of order ${group.subgroups[this.subgroupIndex].order}.
      </li>
   </template>
   <template id="last-subgroup-template">
      <li id="${this.id}" action="showMenu(event, ${this.id})">
         ${this.name} = ⟨ ${generators.join(', ')} ⟩ is the group itself.
      </li>
   </template>
</div>

<template id="subset-template">
   <li id="${this.id}" action="showMenu(event, ${this.id})">
      ${this.name} = { ${elements.join(', ')} }
      is ${numElements == 0 || numElements == group.order ? 'the' : 'a'} subset of size ${numElements}.
   </li>
</template>

<template id="order-class-template">
   <li id="${this.id}" class="orderClass" action="showMenu(event, ${this.id})">
      ${this.name} = { ${this.elementRepresentations.join(', ')} }
      is an order class of size ${this.elements.popcount()}.
   </li>
</template>

<template id="conjugacy-class-template">
   <li id="${this.id}" class="conjugacyClass" action="showMenu(event, ${this.id})">
      ${this.name} = { ${this.elementRepresentations.join(', ')} }
      is a conjugacy class of size ${this.elements.popcount()}.
   </li>
</template>

<template id="coset-class-template">
   <li id="${this.id}" class="${this.parent.side}coset${this.parent.subgroup.id}" action="showMenu(event, ${this.id})">
      ${this.name} = { ${this.elementRepresentations.join(', ')} }
      is the ${this.parent.isLeft ? 'left' : 'right'} coset of ${this.parent.subgroup.name}
      by ${(group.representation[this.elements.toArray()[0]])}.
   </li>
</template>

<template id="subset-elements-template">
   <div id="subset-elements" class="tooltip remove-on-clean" style="position: fixed">
      <h3>Elements of ${subsetName}:</h3>
      ${subsetElements.join(', ')}
   </div>
</template>

<template id="header-menu-template">
   <ul id="header-menu" class="menu remove-on-clean" action="() => void 0">
      <li action="SubsetEditor.open()">Create ${Subset.nextName()}</li>
      <hr>
      ${(!showingOrderClasses() || !showingConjugacyClasses())
      ? Menu.makeLink('Compute', 'compute-menu') : ''}
      <li action="clearHighlights()">Clear all highlighting</li>
   </ul>
   <ul id="compute-menu" class="menu remove-on-clean" action="() => void 0">
      ${showingConjugacyClasses() ? '' : eval(Template.HTML('all-conjugacy-classes-template'))}
      ${showingOrderClasses() ? '' : eval(Template.HTML('all-order-classes-template'))}
   </ul>
</template>

<template id="subgroup-menu-template">
   <ul id="subgroup-menu" class="menu remove-on-clean" action="() => void 0">
      <li action="SubsetEditor.open()">Create ${Subset.nextName()}</li>
      <hr>
      ${Menu.makeLink('Compute', 'compute-menu')}
      ${Menu.makeLink('Highlight item by', 'highlight-item-menu')}
      <li action="clearHighlights()">Clear all highlighting</li>
   </ul>
   <ul id="compute-menu" class="menu remove-on-clean" action="() => void 0">
      ${showingConjugacyClasses() ? '' : eval(Template.HTML('all-conjugacy-classes-template'))}
      ${showingOrderClasses() ? '' : eval(Template.HTML('all-order-classes-template'))}
      <li action="displayList[${this.id}].normalizer">the normalizer of ${this.name}, Norm(${this.name})</li>
      ${showingLeftCosets(this.id) ? '' : eval(Template.HTML('left-cosets-template'))}
      ${showingRightCosets(this.id) ? '' : eval(Template.HTML('right-cosets-template'))}
      ${Menu.makeLink('an intersection', 'intersection-menu')}
      ${Menu.makeLink('a union', 'union-menu')}
      ${Menu.makeLink('an elementwise product', 'elementwise-product-menu')}
   </ul>
   <ul id="intersection-menu" class="menu remove-on-clean" action="() => void 0">
      ${ makeLongList(this.id, 'intersection-item-template') }
   </ul>
   <ul id="union-menu" class="menu remove-on-clean" action="() => void 0">
      ${ makeLongList(this.id, 'union-item-template') }
   </ul>
   <ul id="elementwise-product-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'elementwise-product-item-template') }
   </ul>
   ${eval(Template.HTML('highlight-item-menu-template'))}
</template>

<template id="subset-menu-template">
   <ul id="subset-menu" class="menu remove-on-clean" action="() => void 0">
      <li action="SubsetEditor.open(${this.id})">Edit list of elements in ${this.name}</li>
      <li action="displayList[${this.id}].destroy()">Delete ${this.name}</li>
      <li action="SubsetEditor.open()">Create ${Subset.nextName()}</li>
      <hr>
      ${Menu.makeLink('Compute', 'compute-menu')}
      ${Menu.makeLink('Highlight item by', 'highlight-item-menu')}
      <li action="clearHighlights()">Clear all highlighting</li>
   </ul>
   <ul id="compute-menu" class="menu remove-on-clean" action="() => void 0">
      ${showingConjugacyClasses() ? '' : eval(Template.HTML('all-conjugacy-classes-template'))}
      ${showingOrderClasses() ? '' : eval(Template.HTML('all-order-classes-template'))}
      <li action="displayList[${this.id}].closure">the closure of ${name}, ⟨ ${name} ⟩</li>
      ${Menu.makeLink('an intersection', 'intersection-menu')}
      ${Menu.makeLink('a union', 'union-menu')}
      ${Menu.makeLink('an elementwise product', 'elementwise-product-menu')}
   </ul>
   <ul id="intersection-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'intersection-item-template')}
   </ul>
   <ul id="union-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'union-item-template')}
   </ul>
   <ul id="elementwise-product-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'elementwise-product-item-template')}
   </ul>
   ${eval(Template.HTML('highlight-item-menu-template'))}
</template>

<template id="partition-menu-template">
   <ul id="partition-menu" class="menu remove-on-clean" action="() => void 0">
      <li action="displayList[${this.id}].parent.destroy()">Delete partition ${this.parent.name}</li>
      <li action="SubsetEditor.open()">Create ${Subset.nextName()}</li>
      <hr>
      ${Menu.makeLink('Compute', 'compute-menu')}
      ${Menu.makeLink('Highlight item by', 'highlight-item-menu')}
      ${Menu.makeLink('Highlight partition by', 'highlight-partition-menu')}
      <li action="clearHighlights()">Clear all highlighting</li>
   </ul>
   <ul id="compute-menu" class="menu remove-on-clean" action="() => void 0">
      ${showingConjugacyClasses() ? '' : eval(Template.HTML('all-conjugacy-classes-template'))}
      ${showingOrderClasses() ? '' : eval(Template.HTML('all-order-classes-template'))}
      <li action="displayList[${this.id}].closure">the closure of ${this.name}, ⟨ ${this.name} ⟩</li>
      ${Menu.makeLink('an intersection', 'intersection-menu')}
      ${Menu.makeLink('a union', 'union-menu')}
      ${Menu.makeLink('an elementwise product', 'elementwise-product-menu')}
   </ul>
   <ul id="intersection-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'intersection-item-template')}
   </ul>
   <ul id="union-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'union-item-template')}
   </ul>
   <ul id="elementwise-product-menu" class="menu remove-on-clean" action="() => void 0">
      ${makeLongList(this.id, 'elementwise-product-item-template')}
   </ul>
   ${eval(Template.HTML('highlight-item-menu-template'))}
   ${eval(Template.HTML('highlight-partition-menu-template'))}
</template>

<template id="all-conjugacy-classes-template">
   <li action="new ConjugacyClasses()">all conjugacy classes <i>CC</i><sub>i</sub></li>
</template>

<template id="all-order-classes-template">
   <li action="new OrderClasses()">all order classes <i>OC</i><sub>i</sub></li>
</template>

<template id="intersection-item-template">
   <li action="displayList[${id}].intersection(displayList[${other_id}])">
      the intersection of ${displayList[id].name} with ${displayList[other_id].name}</li>
</template>

<template id="union-item-template">
   <li action="displayList[${id}].union(displayList[${other_id}])">
      the union of ${displayList[id].name} with ${displayList[other_id].name}</li>
</template>

<template id="elementwise-product-item-template">
   <li action="displayList[${id}].elementwiseProduct(displayList[${other_id}])">
      the elementwise product of ${displayList[id].name} with ${displayList[other_id].name}</li>
</template>

<template id="left-cosets-template">
   <li action="displayList[${this.id}].leftCosets">all left cosets <i>g</i>${this.name} of ${this.name}</li>
</template>

<template id="right-cosets-template">
   <li action="displayList[${this.id}].rightCosets">all right cosets ${this.name}<i>g</i> of ${this.name}</li>
</template>

<template id="highlight-item-menu-template">
   <ul id="highlight-item-menu" class="menu remove-on-clean" action="() => void 0">
      <li action="highlighters[0].handler([${this.elementString}])">
         <img src="./images/hightype-sphere-node.jpg">${highlighters[0].label}
      </li>
      <li action="highlighters[1].handler([${this.elementString}])">
         <img src="./images/hightype-sphere-node.jpg"> ${highlighters[1].label}
      </li>
      <li action="highlighters[2].handler([${this.elementString}])">
         <img src="./images/hightype-sphere-node.jpg"> ${highlighters[2].label}
      </li>
   </ul>
</template>

<template id="highlight-partition-menu-template">
   <ul id="highlight-partition-menu" class="menu remove-on-clean" action="() => void 0">
      <li action="highlighters[0].handler(${this.parent.allElementString})">
         <img src="./images/hightype-sphere-node.jpg"> ${highlighters[0].label}
      </li>
      <li action="highlighters[1].handler(${this.parent.allElementString})">
         <img src="./images/hightype-sphere-node.jpg"> ${highlighters[1].label}
      </li>
      <li action="highlighters[2].handler(${this.parent.allElementString})">
         <img src="./images/hightype-sphere-node.jpg"> ${highlighters[2].label}
      </li>
   </ul>
</template>

<template id="subset-editor-template">
   <div id="subset-editor">
      <div id="ssedit-content">
         <div id="ssedit-title">Edit subset</div>
         <div id="ssedit-heading">Customize the elements of ${setName} by dragging elements into or out of it below.</div>
         
         <span id="ssedit-in-elements-heading">Elements in ${setName}</span>
         <ul id="ssedit-in-elements-list"></ul>
         <button id="ssedit-cancel-button">Cancel</button>

         <span id="ssedit-not-in-elements-heading">Elements not in ${setName}</span>
         <ul id="ssedit-not-in-elements-list"></ul>
         <button id="ssedit-ok-button">OK</button>
      </div>
   </div>
</template>
